<h1 matDialogTitle>{{ 'Delete' | translate }}</h1>
<form class="ix-form-container" [formGroup]="form" (submit)="onSubmit()">
  @if (!isJobCompleted()) {
    <p>
      <strong>
        {{ 'The following { n, plural, one {boot environment} other {# boot environments} } will be deleted. Are you sure you want to proceed?' | translate: { n: bulkItems.size } }}
      </strong>
    </p>
  } @else {
    <p>
      @if (failedCount) {
        <strong>
          {{ 'Warning: {n} of {total} boot environments could not be deleted.' | translate: { n: failedCount, total: bulkItems.size } }}
        </strong>
      }
      @if (successCount) {
        <strong>
          {{ '{n, plural, one {# boot environment} other {# boot environments}} has been deleted.' | translate: { n: successCount } }}
        </strong>
      }
    </p>
  }

  <div class="bulk-list">
    @for (bulkItem of bulkItems | keyvalue; track trackByKey($index, bulkItem)) {
      <ix-bulk-list-item [item]="bulkItem.value">
        <span>{{ bulkItem.value.item.id }}</span>
      </ix-bulk-list-item>
    }
  </div>

  <div class="form-actions">
    <div class="form-actions-cell">
      @if (!isJobCompleted()) {
        <ix-checkbox
          formControlName="confirm"
          [label]="'Confirm' | translate"
          [required]="true"
        ></ix-checkbox>
      }
    </div>

    <div class="form-actions-cell">
      <ng-container *ixRequiresRoles="requiredRoles">
        @if (!isJobCompleted()) {
          <button
            mat-button
            type="submit"
            color="warn"
            ixTest="delete"
            [disabled]="form.invalid"
          >
            {{ 'Delete' | translate }}
          </button>
        }
      </ng-container>
      @if (!isJobCompleted()) {
        <button
          mat-button
          type="button"
          ixTest="save"
          matDialogClose
        >
          {{ 'Cancel' | translate }}
        </button>
      } @else {
        <button
          mat-button
          type="button"
          ixTest="close"
          [matDialogClose]="true"
        >
          {{ 'Close' | translate }}
        </button>
      }
    </div>
  </div>
</form>
